<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      /* 对div进行一些基础的样式设置 */
      .box {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
      /* 用于选中鼠标悬停在元素上的状态 */
      .box:hover {
        background-color: red;
      }
      /* 用于选中鼠标选中元素时的状态 鼠标按住不松手*/
      .box:active {
        background-color: blue;
      }
      /* 对超链接进行样式设置 */
      /* 选中超链接从未访问过的状态 */
      a:link {
        color: gray;
      }
      /* 选中超链接已被访问过的状态 */
      a:visited {
        color: orange;
      }
      /* 超链接悬停状态 */
      a:hover {
        color: green;
      }
      /* 超链接选中状态 */
      a:active {
        color: pink;
      }
      /* 注意：超链接的4种状态如何需都生效，需按照以上的顺序来写 */
      /* 输入框获得焦点的状态 */
      input:focus {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <!-- 选中某个状态或者某个时刻 -->
    <div class="box"></div>
    <hr>
    <a href="https://www.baidu.com">网址1</a>
    <a href="abc">网址2</a>
    <input type="text" placeholder="我是输入框">
  </body>
</html>
